import { reactive, ref } from 'vue'
import { DICT_DATA } from '@/utils/dict-data'
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus'
import { deleteMenu, menuDisable, menuTree, userMenuTree } from '@/apis/system/menu'

export class MenuData {
    tableData: any[] = reactive([])
    filterTableData: any[] = reactive([])
    searchData = {
        name: '',
        permsUrl: ''
    }
    resource = ref('Sponsor')
    formData = reactive({
        visible: false,
        id: '',
        type: 'crate',
        menuType: '1',
        name: '',
        parentId: '',
        routePath: '',
        component: '',
        componentName: '',
        defaultLink: '',
        icon: '',
        sort: '',
        isRoute: false,
        permsUrl: ''
    })
    constructor() {
        this.getData()
    }
    getData = (arg?: any) => {
        menuTree().then(res => {
            if (Number(res.data.code) === 200) {
                this.tableData.length = 0
                this.tableData.push(...res.data.result)
                this.filterTableData.length = 0
                this.filterTableData.push(...res.data.result)
            }
        })
    }
    onSearch = (val: string, type: string) => {
        if (val) {
            this.filterTableData.length = 0
            const list: any[] = JSON.parse(JSON.stringify(this.tableData))
            this.filterTableData.push(...this.filterData(list, val, type))
        } else {
            this.filterTableData.length = 0
            this.filterTableData.push(...this.tableData)
        }
    }

    filterData(list: any[], val: string, type: string) {
        const arr: any[] = []
        list.forEach((item: any) => {
            if (item.subPermissions.length) {
                arr.push(...this.filterData(item.subPermissions, val, type))
            }
            if (type === 'name') {
                if (item.name.indexOf(val) !== -1) {
                    item.subPermissions = []
                    arr.push(item)
                }
            } else if (type === 'permsUrl') {
                if (item.permsUrl && item.permsUrl.indexOf(val) !== -1) {
                    item.subPermissions = []
                    arr.push(item)
                }
            }
        })
        return arr
    }

    operate(type: string, data?: any) {
        console.log(data)
        this.formData.type = type
        if (type === 'delete') {
            ElMessageBox.confirm('确定要删除该菜单?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    deleteMenu(data.id).then(res => {
                        if (Number(res.data.code) === 200) {
                            ElMessage.success('删除成功')
                            this.getData()
                        }
                    })
                })
                .catch(() => {
                    // 取消
                })
        } else if (type === 'create') {
            this.formData.visible = true
            if (data) {
                //新增子菜单
                this.formData.id = data.id
                this.formData.parentId = data.id
            } else {
                //新增
                this.formData.id = ''
                this.formData.parentId = ''
            }
        } else if (type === 'edit') {
            this.formData.visible = true
            this.formData.id = data.id
            this.formData.menuType = data.type
            this.formData.name = data.name
            this.formData.parentId = data.parentId
            this.formData.routePath = data.routePath
            this.formData.component = data.component
            this.formData.componentName = data.componentName
            this.formData.defaultLink = data.redirect
            this.formData.icon = data.icon
            this.formData.sort = data.sortNo
            this.formData.isRoute = data.isRoute ? true : false
            this.formData.permsUrl = data.permsUrl
        } else if (type === 'switch') {
            menuDisable(data.id, data.disable ? 0 : 1).then(res => {})
            data.disable = data.disable ? 0 : 1
        }
    }
    //监听弹窗关闭
    dialogClose = () => {
        this.formData.visible = false
        if (this.searchData.name == '') {
            this.getData()
        }
    }
}
